<!DOCTYPE html>
<html lang="zh">
<head>
  <title>图标选项卡</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
  <link rel="stylesheet" href="../../lib/ionic/css/ionic.min.css">
</head>
<body>
<!--上面还有一段区域，通常用来放置等高条块-->
<!--顶部选项卡，图标在文字上方-->
<div class="tabs tabs-top tabs-dark tabs-icon-top">
  <a class="tab-item active tab-item-balanced" href="#">
    <i class="icon ion-chatbubble-working"></i>
    消息
  </a>
  <a class="tab-item" href="#">
    <i class="icon ion-person-stalker"></i>
    联系人
  </a>
  <a class="tab-item" href="#">
    <i class="icon ion-social-tux"></i>
    动态
  </a>
</div>

<!--选项卡，仅显示图标-->
<div class="tabs tabs-color-assertive tabs-icon-only">
  <a class="tab-item active" href="#">
    <i class="icon ion-home"></i>
    主页
  </a>
  <a class="tab-item" href="#">
    <i class="icon ion-star"></i>
    收藏
  </a>
  <a class="tab-item" href="#">
    <i class="icon ion-gear-a"></i>
    设置
  </a>
</div>
</body>
</html>
